import React, { Component,lazy,Suspense } from 'react'
import Top from './components/Top'
import Footer from "./components/Footer";
import PageLoading from "./components/PageLoading";
import {Route,Switch,Redirect} from 'react-router-dom'
import {BackTop} from "antd";
//路由懒加载
const Mall = lazy(() => import('./Pages/Mall'));
const Login = lazy(() => import('./Pages/Login'))
const ShopCar= lazy(() => import('./Pages/ShopCar'))
const GoodsDetail = lazy(() => import('./Pages/GoodsDetail'))
export default class App extends Component {
  render() {
    return (
      <div>
          <BackTop visibilityHeight={250}/>
        {/*顶部区域*/}
          <Top/>

          {/*商城、购物车、登录三大页面路由导航*/}
          <Suspense fallback={<PageLoading/>}>
              <Switch>
                  {/*商城*/}
                  <Route path='/mall' component={Mall}/>

                  {/*登录注册*/}
                  <Route path='/login' component={Login}/>

                  {/*购物车*/}
                  ><Route path='/car' component={ShopCar}/>

                  {/*详情页*/}
                  <Route path='/detail' component={GoodsDetail}/>

                  {/*路由重定向到首页商城*/}
                  <Redirect to='/mall/home'/>
              </Switch>
          </Suspense>

          {/*底部*/}
          <Footer/>
      </div>
    )
  }
}
